<template>
  <div class="picBox" @scroll="addPic">
    <div class="pic" ref="imgDomBox">
      <!-- <img v-for="item in picList" :key="item.id" v-lazy="item.url" alt="" /> -->
      <div v-for="item in picList" :key="item.id" :data-src="item.url" v-initImg="item">
        <div class="picContainer"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, nextTick, onUnmounted } from "vue";
import { TPic } from "@/type/pic";
import axios from "@/http";
import { jieliuUtil, limitRequest } from "@/util/util";
const picList = ref<TPic[]>([]);
const pageNum = ref(1);
const total = ref(0);
const lastIndex = ref(0);
const imgDomBox = ref<HTMLDivElement | null>(null);
const cancelFn = ref<Function | null>(null);
const loadingStatus = ref<boolean>(false);
onMounted(() => {
  getPicList();
});
onUnmounted(() => {
  loadingStatus.value = false;
  cancelFn.value && cancelFn.value();
});
watch(pageNum, () => {
  getPicList();
});
const addPic = (e: any) => {
  // 如果当前的图片还在加载，则不加载下一个分页数据
  if (loadingStatus.value) {
    return;
  }
  jieliuUtil(() => {
    if (picList.value.length >= total.value) {
      return;
    }
    const top = e.target!.scrollTop + e.target.getBoundingClientRect().height;
    const height = e.target!.scrollHeight;
    addPageNum(height, top);
  }, 300);
};
const addPageNum = (a: number, b: number) => {
  if (a - b <= 200) {
    pageNum.value++;
  }
};
const getPicList = (pageSize: number = 25) => {
  axios
    .get("/pic/search", {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize,
      },
    })
    .then((res) => {
      const list = [...res.data.data.recordList];
      picList.value = [...picList.value, ...res.data.data.recordList];
      total.value = res.data.data.total;
      nextTick(() => {
        limitReq(list);
      });
    });
};
const limitReq = (arr: any[]) => {
  if (arr.length === 0) return;
  loadingStatus.value = true;
  const limitArr = arr.map((item) => {
    return () =>
      new Promise((resolve) => {
        let img: HTMLImageElement | null = new Image();
        img.src = item.url;
        img.style.width = "100%";
        img.onload = () => {
          resolve({ img });
        };
      });
  });
  cancelFn.value = limitRequest(
    limitArr,
    3,
    (res: any, index: number) => {
      res &&
        res.img &&
        imgDomBox.value?.children[index + lastIndex.value].children[0].appendChild(
          res.img
        );
    },
    (_: any, index: number) => {
      lastIndex.value = lastIndex.value + index;
      loadingStatus.value = false;
    }
  );
};
</script>
<style scoped lang="scss">
.picBox {
  height: calc(100vh - 50px);
  overflow: scroll;
}
.pic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1px; // 在未设置默认grid-template-rows的时候，这玩意就会撑开高度 相当于给每个容器添加高度
  div {
    width: 100%;
    .picContainer {
      transition: all 0.2s;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>
